<template>
<div class="body" v-loading="loading">
  <div style="width:100%" class="top_menu">
    <el-select v-model="lookScope" @change="handelChange" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <template v-if="lookScope === 'daily'">
      查看日期：<el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        @change="changeDate"
        value-format="yyyy/MM/dd"
        :picker-options="pickerOptions"
        placeholder="选择日期">
      </el-date-picker>
    </template>
     <template v-if="lookScope === 'customRange'">
      <el-date-picker
      v-model="SEdates"
      type="daterange"
      range-separator="至"
      :picker-options="pickerOptions"
      @change="changeDate1"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </template>
    </div>
  <center>
    <homeTop ref="top" :basicInfo= "basicInfo"></homeTop>
    <home-center :basicInfo= "basicInfo"></home-center>
  <home-bottom :violationMap= "violationMap"></home-bottom>
  </center>
 
</div>
</template>
<script type="text/javascript">
import homeCenter from './homeCenter'
import homeBottom from './homeBottom'
import homeTop from './homeTop'
import echarts from 'echarts'
import {getByDate, selectWeekInfo, selectByRange} from '@/apis/basicInfo'
import {formatDate, changeDate} from '@/utils/date.js'
import { selectTimesByDate, getWeeklyData, selectViolationByRange } from '@/apis/violation'
import Vue from 'Vue'
Vue.use(echarts)
export default {
  components: {
    homeCenter,
    homeTop,
    homeBottom
  },
  created () {
    console.log(changeDate(-9))
    this.date = formatDate(this.date, 'yyyy/MM/dd')
    this.loading = true
    getByDate(this.date).then(e => {
      this.basicInfo = e.data
      if (!this.basicInfo) {
        this.$message.error('当天没有行车数据')
      }
      this.$refs.top.myChart.setOption({
        series: [{
          data: [{value: this.basicInfo ? this.basicInfo.avgSpeed : 0, name: '平均车速'}]
        }]
      }
      )
      this.$refs.top.myChart1.setOption({
        series: [{
          data: [{value: this.basicInfo ? this.basicInfo.nightSpeed : 0, name: '夜间行驶速度'}]
        }]
      }
      )
      this.loading = false
    })
    selectTimesByDate(this.date).then(e => {
      this.violationMap = e.data
    })
  },
  data () {
    return {
      date: new Date(),
      violationMap: [],
      lookScope: 'daily',
      SEdates: [],
      basicInfo: {},
      loading: false,
      options: [
        {
          value: 'daily',
          label: '单日行驶数据'
        },
        {
          value: 'week',
          label: '近一周行驶数据'
        },
        {
          value: 'month',
          label: '近30天行驶数据'
        },
        {
          value: 'customRange',
          label: '自定义查看范围'
        }
      ],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now() - 8.64e6
        }
      }
    }
  },
  methods: {
    changeDate1 () {
      this.getInfoByRange(this.SEdates[0], this.SEdates[1])
      this.getViolationByRabge(this.SEdates[0], this.SEdates[1])
    },
    // 改变查看范围
    handelChange () {
      this.$message(this.lookScope)
      if (this.lookScope === 'week') {
        getWeeklyData().then(e => {
          this.violationMap = e.data
        })
        selectWeekInfo().then(e => {
          let info = e.data
          if (info) {
            info.avgSpeed = parseInt(info.avgSpeed)
            info.nightSpeed = parseInt(info.nightSpeed)
            this.basicInfo = info
          } else {
            this.basicInfo = {}
          }
          this.updateEcharts()
        })
      } else if (this.lookScope === 'daily') {
        getByDate(this.date).then(e => {
          let info = e.data
          this.setData(info)
          if (!info) {
            this.$message.error('当天没有行车数据')
          }
        })
        selectTimesByDate(this.date).then(e => {
          this.violationMap = e.data
        })
      } else if (this.lookScope === 'month') {
        this.getInfoByRange(changeDate(-29), new Date())
        this.getViolationByRabge(changeDate(-29), new Date())
      } else {
        if (this.SEdates.length >= 2) {
          this.getInfoByRange(this.SEdates[0], this.SEdates[1])
          this.getViolationByRabge(this.SEdates[0], this.SEdates[1])
        }
      }
    },
    // 更新数据
    setData (info) {
      if (info) {
        info.avgSpeed = parseInt(info.avgSpeed)
        info.nightSpeed = parseInt(info.nightSpeed)
        this.basicInfo = info
      } else {
        this.basicInfo = {
          avgSpeed: 0,
          nightSpeed: 0
        }
      }
      this.updateEcharts()
    },
    // 根据范围获取信息
    getInfoByRange (begin, end) {
      begin = formatDate(begin, 'yyyy/MM/dd')
      end = formatDate(end, 'yyyy/MM/dd')
      selectByRange(begin, end).then(e => {
        let info = e.data
        this.setData(info)
      })
    },
    getViolationByRabge (begin, end) {
      begin = formatDate(begin, 'yyyy/MM/dd')
      end = formatDate(end, 'yyyy/MM/dd')
      selectViolationByRange(begin, end).then(e => {
        this.violationMap = e.data
      })
    },
    updateEcharts () {
      this.$refs.top.myChart.setOption({
        series: [{
          data: [{value: this.basicInfo ? this.basicInfo.avgSpeed : 0, name: '平均车速'}]
        }]
      }
      )
      this.$refs.top.myChart1.setOption({
        series: [{
          data: [{value: this.basicInfo ? this.basicInfo.nightSpeed : 0, name: '夜间行驶速度'}]
        }]
      }
      )
    },
    // 改变时间
    changeDate () {
      console.log(this.date)
      this.$message('改变时间')
      selectTimesByDate(this.date).then(e => {
        this.violationMap = e.data
      })
      getByDate(this.date).then(e => {
        this.basicInfo = e.data
        if (!this.basicInfo) {
          this.$message.error('当天没有行车数据')
        }
        console.log(this.$refs.top.data1)
        this.$refs.top.myChart.setOption({
          series: [{
            data: [{value: this.basicInfo.avgSpeed ? this.basicInfo.avgSpeed : 0, name: '平均车速'}]
          }]
        }
        )
        this.$refs.top.myChart1.setOption({
          series: [{
            data: [{value: this.basicInfo.nightSpeed ? this.basicInfo.nightSpeed : 0, name: '夜间行驶速度'}]
          }]
        }
        )
      })
    }
  },
  name: 'home'
}
</script>
<style type="text/css" scoped>
  .top_menu{
    width: 100%;
    background: white;
    padding: 10px;
  }
  #main1{
    height: 500px;
    width: 500px;
  }
  .test{
    height: 40px;
    background: #ccc;
    margin-bottom: 15px;
  }
</style>
